<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .image-container {
      perspective: 1000px;
      /* //透视容器距离观察点的距离 */
    }

    #myImage {
      width: 200px;
      height: 200px;
      background: url('./a.png') no-repeat center;
      background-size: cover;
      transform-style: preserve-3d;
      /* //保持3D变换效果 */
      transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      /* //初始位置和旋转（在xyz三个轴上都为0） */
    }
  </style>
</head>

<body>
  <div id="myImage"></div>
  <script>
    let image = document.getElementById('myImage');
    let x = 0;
    let y = 0;
    let z = 0;
    let rotationX = 0;
    let rotationY = 0;
    let rotationZ = 0;

    document.addEventListener('keydown', function (event) {
      if (event.keyCode === 37) {
        x -= 10; // 按下左箭头键，沿x轴负方向移动
      } else if (event.keyCode === 38) {
        y -= 10; // 按下上箭头键，沿y轴负方向移动
      } else if (event.keyCode === 39) {
        x += 10; // 按下右箭头键，沿x轴正方向移动
      } else if (event.keyCode === 40) {
        y += 10; // 按下下箭头键，沿y轴正方向移动
      } else if (event.keyCode === 33) {
        z -= 10; // 按下PageUp键，沿z轴负方向移动
      } else if (event.keyCode === 34) {
        z += 10; // 按下PageDown键，沿z轴正方向移动
      } else if (event.keyCode === 65) {
        rotationX -= 10; // 按下字母A键，沿x轴负方向旋转
      } else if (event.keyCode === 83) {
        rotationY -= 10; // 按下字母S键，沿y轴负方向旋转
      } else if (event.keyCode === 68) {
        rotationX += 10; // 按下字母D键，沿x轴正方向旋转
      } else if (event.keyCode === 70) {
        rotationY += 10; // 按下字母F键，沿y轴正方向旋转
      } else if (event.keyCode === 81) {
        rotationZ -= 10; // 按下字母Q键，沿z轴负方向旋转
      } else if (event.keyCode === 69) {
        rotationZ += 10; // 按下字母E键，沿z轴正方向旋转
      }

      image.style.transform = `translate3d(${x}px, ${y}px, ${z}px) rotateX(${rotationX}deg) rotateY(${rotationY}deg) rotateZ(${rotationZ}deg)`;
    });
  </script>
</body>

</html>